<template>
  <div class="box">
    <swiper class="swip" />
    <div class="top" :class="{ active: headerScroll }">
      <i class="iconfont icon-fanhui" @click="fn()"></i>
      <div class="txt">上新精选</div>
      <div class="blank"></div>
    </div>
    <div class="title">
      <span class="title_left">上海精选</span>
      <span class="title_right">精选新品 闭眼放心买</span>
    </div>
    <div class="list_top">
      <ul v-for="(v, i) in listarr" :key="i">
        <li>
          <img :src="v.img" />
          <span>
            <h1>{{ v.name }}</h1>
            <p>{{ v.title }}</p>
            <h2>
              98%
              <p>好评率</p>
              <p />
            </h2>
            <span>特价</span>
            <h3>{{ v.price }}</h3>
          </span>
        </li>
      </ul>
    </div>
    <ul class="bottom_title">
      <li
        v-for="item in categoryData"
        :key="item.categoryId"
        v-text="item.categoryName"
        :class="{ active: currentIndex == item.categoryId }"
        @click="selectMenu(item.categoryId)"
      ></li>
    </ul>

    <template v-for="(category, index) in categoryData">
      <div class="bottom" v-if="currentIndex == category.categoryId" :key="index">
        <ul  v-for="(products,
                      index) in category.secondLevelCategoryVOS"
                      :key="index">
              <li  v-for="(product,
                        index) in products.thirdLevelCategoryVOS"
                        :key="index">
<img :src="product.categoryImg" alt="">
             <p>{{product.categoryName}}</p>
            <h3>{{product.categoryPrice}}</h3>

              </li>

          <!-- <li
           v-for="(products,index) in category.secondLevelCategoryVOS"
          :key="index"
        >
            <img :src="products.categoryImg" alt="">
             <p>{{products.categoryName}}</p>
            <h3>{{products.categoryPrice}}</h3>
        </li> -->

          <!-- <li>
          <img
            src="https://img.youpin.mi-img.com/shopmain/85c0bec2cb489fe97bf05e8d5616512f.jpg@base@tag=imgScale&h=342&m=1&q=80&w=342"
            alt=""
          />
          <div>
            <p>兰博基尼车模</p>
            <h3>￥78起</h3>
          </div>
        </li>
         <li>
          <img
            src="https://img.youpin.mi-img.com/shopmain/85c0bec2cb489fe97bf05e8d5616512f.jpg@base@tag=imgScale&h=342&m=1&q=80&w=342"
            alt=""
          />
          <div>
            <p>兰博基尼车模</p>
            <h3>￥78起</h3>
          </div>
        </li>
         <li>
          <img
            src="https://img.youpin.mi-img.com/shopmain/85c0bec2cb489fe97bf05e8d5616512f.jpg@base@tag=imgScale&h=342&m=1&q=80&w=342"
            alt=""
          />
          <div>
            <p>兰博基尼车模</p>
              <h3>￥78起</h3>
          </div>
        </li> -->
        </ul>
      </div>
    </template>

    <div class="down">
      <div class="right"></div>
      <span class="txt"> 更多好物，敬请期待！ </span>
      <div class="left"></div>
    </div>
  </div>
</template>

<script>
import swiper from "@/components/swipers.vue";
import axios from "axios";
export default {
  components: {
    swiper,
  },
  data() {
    return {
      headerScroll: false,
      listarr: [],
      categoryData: [],
      currentIndex: 1,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.pageScroll, true);
    this.list();
    // this.arr();
  },
  created(){
     axios({
        // url: "/api/category",
        url:"/api/xiaomipro/goods/category1",
        method: "get",
      }).then((res) => (this.categoryData = res.data.category));
  },
  methods: {
    pageScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop > 50 ? (this.headerScroll = true) : (this.headerScroll = false);
    },
    async list() {
      let res = await axios({
        // url: "/api/lists",
        url:"/api/xiaomipro/goods/list1",
        method: "get",
      }).then((res) => (this.listarr = res.data.lists));
    },
    // async arr() {
    //   let res = await axios({
    //     url: "http://localhost:3000/category",
    //     method: "get",
    //   }).then((res) => (this.categoryData = res.data));
    // },
    selectMenu(index) {
      this.currentIndex = index;
    },
    fn(){
      this.$router.go(-1)
    }
  },
};
</script>

<style lang ="scss" scoped>
@import url(../assets/font_7af79ekbdrf/iconfont.css);
.box {
  width: 100%;
  height: 100%;
  background-color: rgb(244, 247, 247);
  .top {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;

    .icon-fanhui {
      display: block;
      font-size: 22px;
      color: white;
      z-index: 99999;
      margin-left: 10px;
    }
    .txt {
      width: 250px;
      font-size: 20px;
      text-align: center;
      z-index: 99999;
      color: rgb(255, 236, 199);
    }
    &.active {
      background: rgb(34, 36, 41);
      color: rgb(255, 255, 255);
      .txt {
        color: rgb(255, 255, 255);
      }
    }
  }
  .title {
    width: 90%;
    height: 44px;
    background-color: rgb(242, 245, 245);
    line-height: 44px;
    margin: auto;
    .title_left {
      color: #333;
      font-size: 20px;
      font-weight: bold;
      padding-right: 10px;
    }
    .title_right {
      color: #333;
      font-size: 12px;
    }
  }
  .list_top {
    width: 90%;
    margin: auto;
    ul {
      background-color: white;
      border-radius: 10px;
      li {
        width: 100%;
        height: 150px;
        display: flex;
        img {
          height: 130px;
          background-color: rgb(244, 247, 247);
          border-radius: 10px;
          margin-top: 10px;
          margin-left: 10px;
          margin-right: 10px;
        }
        span {
          line-height: 23px;
          margin: 8px;
          h1 {
            font-size: 15px;
            color: black;
          }
          p {
            font-size: 10px;
            color: rgb(119, 119, 119);
          }
          h2 {
            display: flex;
            font-size: 10px;
            color: rgb(204, 153, 51);
            p {
              color: rgb(119, 119, 119);
            }
          }
          span {
            box-sizing: border-box;
            width: 30px;
            height: 15px;
            background-color: rgb(217, 107, 108);
            padding-left: 5px;
            padding-right: 5px;
            color: white;
            border-radius: 3px;
          }
          h3 {
            font-size: 17px;
            font-weight: normal;
            text-align: left;
            position: relative;
            top: 20px;
          }
        }
      }
    }
  }
  .bottom_title {
    width: 90%;
    height: 50px;
    margin: auto;
    display: flex;
    overflow-x: auto;
    /* flex: 1; */
    /* flex-wrap: nowrap; */
    li {
      width: 90px;
      text-align: center;
      line-height: 50px;
      flex-shrink: 0;
      &.active {
        font-weight: bold;
        color: black;
      }
    }
  }
  .bottom {
    width: 90%;
    margin: auto;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 48%;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 150px;
        }
        div {
          h3 {
            font-size: 17px;
            font-weight: normal;
            text-align: center;
            text-align: left;
          }
        }
      }
    }
  }
  .down {
    width: 90%;
    height: 100px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    .left {
      width: 60px;
      height: 2px;
      background-color: gray;
    }
    .right {
      width: 60px;
      height: 2px;
      background-color: gray;
    }
  }
}
</style>